<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
<link rel="icon" href="./images/favicon.jpg">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">

<title>索尔云员工信息系统</title>

<style type="text/css">
html,body{
	width:100%;
	height:100%;
}
#app{
	width:100%;
	height:100%;
	
	display:flex;
	flex-direction:column;
	justify-content: flex-start;
	align-items: center;

}

.my-card{
	width:260px;
	height:260px;
	display:flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
}

</style>

</head>
<body>
<div id="app">
	<div class="text-muted mt-2 mb-1" >我的头像</div>
	<div class="card my-card mb-3">
		<img v-show="currImage" :src="currImage" style="width:100%;max-height:100%;"/>
		<span v-show="!currImage"  class="text-muted" style="font-size:14px;">未设置头像</span>
	</div>
	<div class="text-muted mb-1" >头像选择和预览</div>
	<div class="card my-card"  @click="clickFileInput">
	
		<img v-show="selectedImage" :src="selectedImage" style="width:100%;max-height:100%;"/>
		<i  v-show="!selectedImage" class="fa fa-plus text-muted" style="font-size:30px; " ></i>
		<input v-if="exists" ref="fileInput"  @change="selectPhoto" style="display:none;" type="file"/><!-- 上传组件 -->
		
	</div>
	<div v-if="loading" class="progress" style="width:260px;height:5px;">
	  <div class="progress-bar"  :style="{width: process}"></div>
	</div>
	<button v-show="uploadButton" @click="uploadPhoto" class="btn btn-primary btn-lg btn-block mt-1" style="width:260px;">上传头像</button>



</div>

<script src="./js/jquery.slim.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./layer/layer.js"></script>
<script src="./js/sweetalert2.all.min.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./js/request.js"></script>

<script type="text/javascript">
	
	new Vue({
		el:'#app',
		data:{
			currImage:false,//当前用户头像URL
			selectedImage:false,//选择预览头像URL
			exists:true,
			uploadButton:false,//是否显示上传按钮
			loading:false,//是否上传中
			process:'0%',//上传进度
			formData:null,//待提交的表单数据
			
		},
		computed:{
			
		},		
		methods:{
			//从服务端异步（ajax）加载
			currPhoto(){
				axios.get('curr-photo',{
					responseType:'blob'//响应类型未二进制数据
				}).then(response=>{
					const imgData = response.data;//从响应中取出图片数据
					this.currImage = window.URL.createObjectURL(imgData);//将数据转化未访问地址
					//获取本窗口的父窗口的文档对象中id为”currphoto“的对象
					const imageObj = window.parent.document.getElementById("currphoto");
					imageObj.src = this.currImage;
				});
			},
			
			//点击选择头像卡片
			clickFileInput(){
				this.$refs.fileInput.click();//通过程序代码点击上传组件
			},
			
			//选择并预览图像
			selectPhoto(){
				//创建一个图像文件的阅读者
				const reader = new FileReader();
				
				//为文件的阅读者设置一个加载事件，该事件在文件数据读取并转化完毕时触发，这时转化结果存储在阅读者的result属性中
				reader.onload=()=>{
					this.selectedImage = reader.result;//将转化的URL赋值与file
					this.uploadButton = true;
				};
				
				//从上传组件中获取文件数据
				const photoData = this.$refs.fileInput.files[0]
				this.exists = false;
				this.$nextTick(()=>{
					this.exists = true;
				});
				//读取文件数据，并转化为URL
				reader.readAsDataURL(photoData);
				
				//封装上传文件数据
				const formData = new FormData();//创建一个封装数据的表单数据容器					
				//将文件数据封装入表单数据容器中，并对应参数名file
				formData.append('file',photoData);
				
				this.formData = formData;				
				console.log(this.formData);
				
			},
			
			//上传头像
			uploadPhoto(){
				this.uploadButton = false;	
				this.loading = true;
				this.process = '0%';
				//上传文件必须用post请求、必须设置请求头：Content-Type = multipart/form-data
				axios.post('upload-photo',this.formData,{
					headers:{
						'Content-Type' : 'multipart/form-data'
					},
					// `onUploadProgress` 允许为上传处理进度事件
				  	onUploadProgress: (e)=> {
				    	this.process = Math.floor(e.loaded*0.96*100/e.total)+'%';
				  	},
				}).then(response=>{
					this.process = '100%';
					this.loading = false;
					const result = response.data;
					if(result.success){
						this.currPhoto();
						this.selectedImage = false;
						
						Swal.fire({
							  icon: 'success',
							  title: '头像上传成功！',
							  showConfirmButton: false,
							  timer: 1500,
							  toast:true,//显示为迷你型提示
							  customClass:{
								  title:'text-success'//text-danger是bootstrap中的一个样式类
							  }
						});
					}else{
						Swal.fire({
							  icon: 'error',
							  title: '头像上传失败！',
							  showConfirmButton: false,
							  timer: 1500,
							  toast:true,//显示为迷你型提示
							  customClass:{
								  title:'text-danger'//text-danger是bootstrap中的一个样式类
							  }
						});
					}
				});
			}
		},
		mounted(){
			this.currPhoto();
		}
	});



</script>



</body>
</html>